<template>
    <Drawer
        ref="drawerRef"
        @success="confirmClick"
        @close="cancelClick"
        :title="popupTitle"
        size='25%'
    >
        <el-form
            ref="formRef"
            class="ls-form mt-5"
            :model="formData"
            label-width="100px"
            :rules="rules"
        >
            <el-form-item label="任务名称" prop="name">
                <div class="w-80">
                    <el-input
                        v-model="formData.name"
                        placeholder="请输入任务名称"
                        maxlength="30"
                        clearable
                    />
                </div>
            </el-form-item>
            <el-form-item label="任务分组" prop="groups">
                <el-select
                    class="w-80"
                    v-model="formData.groupName"
                    clearable
                    placeholder="请选择任务分组"
                >
                    <el-option label="默认" value="default"/>
                    <el-option label="系统" value="system"/>
                </el-select>
            </el-form-item>
            <el-form-item label="调用方法" prop="command">
                <div class="w-80">
                    <el-input
                        v-model="formData.command"
                        placeholder="请输入调用目标字符串"
                        clearable
                    />
                </div>
            </el-form-item>
            
            <el-form-item label="cron表达式" prop="rules">
                <div class="w-80">
                    <el-input v-model="formData.rules" placeholder="请输入cron执行表达式"/>
                </div>
            </el-form-item>
            
            <el-form-item label="备注" prop="remark">
                <div class="w-80">
                    <el-input
                        v-model="formData.remark"
                        type="textarea"
                        :autosize="{ minRows: 3, maxRows: 6 }"
                        :maxlength="200"
                        show-word-limit
                        clearable
                    />
                </div>
            </el-form-item>
            <el-form-item label="执行策略" prop="groups">
                <el-radio-group v-model="formData.strategy">
                    <el-radio :label="1"> 立即执行</el-radio>
                    <el-radio :label="2"> 执行一次</el-radio>
                    <el-radio :label="3"> 放弃执行</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="并发" prop="concurrent">
                <el-switch v-model="formData.concurrent" :active-value="1" :inactive-value="0"/>
            
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="formData.status" :active-value="1" :inactive-value="2"/>
            </el-form-item>
        </el-form>
    
    </Drawer>

</template>

<script lang='ts' setup>

import Drawer from "@/components/sc-drawer/index.vue"
import {FormInstance, FormRules} from "element-plus";
import feedback from "@/utils/feedback";
import {crontabAdd, crontabDetail, crontabEdit} from "@/api/scheduler/scheduler";

const formRef = shallowRef()
const drawerRef = shallowRef(Drawer)
const mode = ref('add')

/**
 * 计算标题
 */
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑定时任务' : '新增定时任务'
})


const formData = reactive({
    id: '',
    name: '',
    groupName: '',
    command: '',
    rules: '',
    status: 1,
    strategy: 1,
    concurrent: 0,
    remark: ''
})


/**
 * 打开弹窗
 */
function open(type: any = 'add') {
    drawerRef.value.open()
    mode.value = type;
}


/**
 * 取消操作
 */
const emit = defineEmits(["close", "success"])


async function cancelClick() {
    await formRef.value?.resetFields()
    emit("close")
}


/**
 * 确认提交
 */
async function confirmClick() {
    await formRef.value?.validate()
    mode.value == 'add' ? await crontabAdd(formData) : await crontabEdit(formData)
    feedback.msgSuccess('操作成功')
    
    await formRef.value?.resetFields()
    emit("success")
    
}


/**
 * 主页面编辑处理
 *
 * @param row
 */
async function setFormData(row: Record<string, any>) {
    await crontabDetail({id: row.id}).then(info => {
        for (const key in formData) {
            if (!!info[key]) {
                //@ts-ignore
                formData[key] = info[key]
            }
        }
    })
}


const rules = {
    name: [{required: true, message: '请输入任务名称', trigger: ['blur']}],
    command: [{required: true, message: '请输入调用目标字符串', trigger: ['blur']}],
    rules: [{required: true, message: '请输入cron执行表达式', trigger: ['blur']}]
}


defineExpose({
    open,
    setFormData
})

</script>

